<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head lang="en">
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>TinyMCE4 Code Editor Plugin Documentation</title>
	<!-- Framework CSS -->
	<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
	<!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
	<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
	<style type="text/css" media="screen">
		p, table, hr, .box { margin-bottom:25px; }
		.box p { margin-bottom:10px; }
	</style>
</head>


<body>
	<div class="container">
		<h1 class="center">TinyMCE4 Code Editor Plugin Documentation</h1>
		
		<div class="borderTop">
			<div class="span-6 colborder info prepend-1">
				<p class="prepend-top">
					<strong>
					By: leaui<br>
					Email: <a href="mailto:leaui@outlook.com">leaui@outlook.com</a>
					</strong>
				</p>
			</div><!-- end div .span-6 -->		
	
			<div class="span-12 last">
				<p class="prepend-top append-0">Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form <a href="http://themeforest.net/user/leaui">here</a>. Thanks so much!
				<br />
				<a href="http://leaui.com/leaui_code_editor.html">Live Demo</a></p>
			</div>
		</div><!-- end div .borderTop -->
		
		<hr>
		
		<h2 id="toc" class="alt">Table of Contents</h2>
		<ul>
			<li><a href="#install">1. How to install it</a></li>
			<li><a href="#files">2. Files and Structure</a>
				<ul>
					<li><a href="#pluingJs">2.1. plugin.js</a></li>
					<li><a href="#dialogJs">2.2. dialog.js</a></li>
				</ul>
			</li>
			<li><a href="#shortcuts">3. Shortcuts</a>
		</ul>
		
		<hr>
		
		<h2 id="install"><strong>1. How to install it</strong> - <a href="#toc">top</a></h2>
		<ol>

		<li>Upload the files to the tinymce plugins’ folder.</li>
		<li>Update your tinymce configuration to add `leaui_code_editor` plugin, eg:</li>
<pre>
tinymce.init({
        selector: "textarea",
        plugins: [
		"leaui_code_editor",
                "advlist autolink link lists charmap  hr anchor pagebreak",
                "directionality textcolor paste fullpage textcolor"
        ],

        toolbar1: "leaui_code_editor | styleselect formatselect fontselect fontsizeselect | bold italic underline strikethrough "
});
</pre>
</li>
</ol>

<p><b>Note</b>: The default css in tinyce has no "&lt;pre&gt;" style, you need to add another css file which contains the "pre" style to tinymce(use content_css option), eg: 

<pre>
tinymce.init({
        selector: "textarea",
        content_css: ['tinymce/js/tinymce/plugins/leaui_code_editor/css/pre.css'],
        plugins: [
		"leaui_code_editor",
                "advlist autolink link lists charmap  hr anchor pagebreak",
                "directionality textcolor paste fullpage textcolor"
        ],

        toolbar1: "leaui_code_editor | styleselect formatselect fontselect fontsizeselect | bold italic underline strikethrough "
});
</pre>
</p>

leaui_code_editor plugin contains pre.css as reference:
<pre>
pre {
	display: block;
	padding: 9.5px;
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.428571429;
	color: #333333;
	word-break: break-all;
	word-wrap: break-word;
	background-color: #f5f5f5;
	border: 1px solid #cccccc;
	border-radius: 4px;
	font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
}
</pre>

		<hr>

		<h2 id="files"><strong>2. Files and Structure</strong> - <a href="#toc">top</a></h2>
		The main files and directories contains:
		<ul>
			<li>plugin.js, tinymce4 plugin js</li>
			<li>js/dialog.js, main js</li>
		</ul>

		<hr>

		<h3 id="pluingJs"><strong>2.1 plugin.js </strong> - <a href="#toc">top</a></h3>

		<p>plugin.js is the tinymce's plugin js, it will be loaded after tinymce has inited. The corresponding minified file: plugin.min.js. </p> 

		<hr>

		<h3 id="dialogJs"><strong>2.2 js/dialog.js</strong> - <a href="#toc">top</a></h3>
		This plugin user ace editor as code editor. Ace editor is used in dialog.js:
<pre>
editor.session.setMode("ace/mode/" + lang);
editor.setTheme("ace/theme/tomorrow");
// enable autocompletion and snippets
editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: false
});
</pre>
If you want to add other ace features in this editor, please see <a href="http://ace.c9.io/#nav=howto">http://ace.c9.io/#nav=howto</a>

		<hr>
		<h2 id="shortcuts"><strong>2. Shortcuts</strong> - <a href="#toc">top</a></h2>
		To toggle code quickly, this plugin add one shortcut:
		<code>ctrl + shift + c</code></b> <br />or <br /><b><code>command + shift + c</code></b> in mac.

		<hr />
		
		<p>Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.</p> 
		
		<p class="append-bottom alt large"><strong>Leaui</strong></p>
		<p><a href="#toc">Go To Table of Contents</a></p>
		
		<hr class="space">
	</div><!-- end div .container -->
</body>
</html>